<template>
  <div class="home_box">
    <div class="login_box">
      <h3>我的外卖系统登录</h3>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm" size="mini">
        <el-form-item prop="uname">
          <el-input v-model.number="ruleForm.uname" prefix-icon="iconfont icon-yonghu"></el-input>
        </el-form-item>
        <el-form-item prop="pass">
          <el-input :type="change_eyes ? 'password' : 'text'" v-model="ruleForm.pass" prefix-icon="iconfont icon-mima" autocomplete="off">
          <!-- 点击'眼睛'切换,需要注册事件,用slot -->
            <template #suffix>
              <i class="iconfont selnone" :class="change_eyes ? 'icon-eyes' : 'icon-eyes-'" @click="change_eyes = !change_eyes"></i>
            </template>
            <!-- <i slot="suffix" class="el-input__icon el-icon-date"></i> -->
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var checkUname = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('用户名不能为空'))
      } else {
        callback()
      }
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    return {
      // 1.数据控制
      ruleForm: {
        uname: '',
        pass: ''
      },
      // 2.规则控制
      rules: {
        uname: [
          { validator: checkUname, trigger: 'blur' }
        ],
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ]
      },
      change_eyes: true
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.home_box {
  height: 100%;
  background-color: #2d3a4b;
  display: flex;
  justify-content: center;
  align-items: center;
  .login_box {
    width: 320px;
    height: 200px;
    // background-color: #fff;
    h3{
      text-align: center;
      font-size: 20px;
      margin-bottom: 30px;
      letter-spacing: 2px;
      color: #eeeeee;
      // 鼠标点击多次不选中
      -moz-user-select: none; /*火狐*/
      -webkit-user-select: none; /*webkit浏览器*/
      -ms-user-select: none; /*IE10*/
      -khtml-user-select: none; /*早期浏览器*/
      -o-user-select: none; /* Opera*/
      user-select: none;
    }
    .el-form{
      .el-input{
        background-color: #283443;
        .selnone{
          cursor: pointer;
          -moz-user-select: none; /*火狐*/
          -webkit-user-select: none; /*webkit浏览器*/
          -ms-user-select: none; /*IE10*/
          -khtml-user-select: none; /*早期浏览器*/
          -o-user-select: none; /* Opera*/
          user-select: none;
        }
      }
      .el-button{
        width: 100%;
      }
    }
  }
}
</style>
